import { createVNode, render, VNode } from 'vue';
import ImageViewer from './src/image-viewer.vue'
import { ImageViewerProps } from './src/types.ts';

let instance: Nullable<VNode> = null

export function createImageViewer(options: ImageViewerProps) {
  const {
    urlList,
    initialIndex = 0,
    infinite = true,
    hideOnClickModal = false,
    teleported = false,
    zIndex = 2000,
    show = true
  } = options

  const container = document.createElement('div')
  container.id = 'image-viewer-container'

  const propsData: Partial<ImageViewerProps> = {}
  propsData.urlList = urlList
  propsData.initialIndex = initialIndex
  propsData.infinite = infinite
  propsData.hideOnClickModal = hideOnClickModal
  propsData.teleported = teleported
  propsData.zIndex = zIndex
  propsData.show = show

  document.body.appendChild(container)
  instance = createVNode(ImageViewer, propsData)
  render(instance, container)
}
